import React, { Component } from 'react'
import ReactEcharts from '../lib/echarts-for-react/src/index'
import echarts from '../lib/bmap/bmap'

class HeatMap extends Component {
  constructor(props) {
    super(props)
  }

  // init and render map
  componentDidMount() {
    let container = this.refs.mapContainer
    this.drawMap(container)
    // 添加百度地图插件
    // let bmap = chart.getModel().getComponent('bmap').getBMap()
    // bmap.addControl(new BMap.MapTypeControl())
  }

  drawMap(container) {
    var myChart = echarts.init(container)
    let heatCoord = this.props.heatCoord.features.map(c => {
        let temp = c.geometry.coordinates
        // 坐标偏移
        temp[0] += 0.012
        temp[1] += 0.0049
      return temp
    })
    // let { coord1, names, heat } = this.props

    // let geoCoordMap = coord1.reduce((acc, cur, curIndex) => {
    //   acc[`${names[curIndex]}`] = cur
    //   return acc
    // }, {})

    // let heatCoord = names.map((n, i) => {
    //   return {
    //     name: n,
    //     // value: heat[i]
    //     value: i + Math.random() * 30 * (Math.random() * 10 > 1 ? 1 : -1) * n + n * 5
    //   }
    // })

    // 热幅变化
    var convertData = function (data, n) {
      var res = []
      for (var i = 0; i < data.length; i++) {
        // var geoCoord = geoCoordMap[data[i].name];
        // if (geoCoord) {
        //   res.push({
        //     name: data[i].name,
        //     value: geoCoord.concat(data[i].value + Math.random() * 30 * (Math.random() * 10 > 1 ? 1 : -1) * n + n * 5)
        //   })
        // }
        let transPoint = {
          x: data[i][0] ,//+ Math.random() * 0.001 * (Math.random()*10 > 1 ? 1 : -1),
          y: data[i][1] , //+ Math.random() * 0.001 * (Math.random()*10 > 1 ? 1 : -1),
          v: data[i][2] || 0 + Math.random() * 30 * (Math.random()*10 > 1 ? 1 : -1) * n +  n*5
        }
        res.push([transPoint.x, transPoint.y, transPoint.v])
      }
      //增加随机热点
      // for (var j = 0; j < 30; j ++) {
      //   let rdPoint = {
      //     x: 108.94 + Math.random() * 0.01 * (Math.random()*10 > 1 ? 1 : -1),
      //     y: 34.24 + Math.random() * 0.03 * (Math.random()*10 > 1 ? 1 : -1),
      //     v: Math.random() * 20 + 10
      //   }
      //   let rdPoint1 = {
      //     x: 108.90 + Math.random() * 0.01 * (Math.random()*10 > 1 ? 1 : -1),
      //     y: 34.26 + Math.random() * 0.03 * (Math.random()*10 > 1 ? 1 : -1),
      //     v: Math.random() * 20 + 10
      //   }

      //   res.push([rdPoint.x, rdPoint.y, rdPoint.v])

      //   res.push([rdPoint1.x, rdPoint1.y, rdPoint.v])
      // }
      return res
    }
    // 地图外边界坐标
    let beilinCoord = this.props.coords.features.map(c => {
      let temp = c.geometry.coordinates
      // 坐标偏移
      temp[0] += 0.012
      temp[1] += 0.0049
      return temp
    })

    // 地图边界绘制样式
    function renderItem(params, api) {
      var points = []
      for (var i = 0; i < beilinCoord.length; i++) {
        let temp = beilinCoord[i]
        points.push(api.coord(temp))
      }

      return {
        type: 'polygon',
        shape: {
          points: echarts.graphic.clipPointsByRect(points, {
            x: params.coordSys.x,
            y: params.coordSys.y,
            width: params.coordSys.width,
            height: params.coordSys.height
          })
        },
        style: api.style({
          fill: '#0e3a49',
          stroke: '#006bea' //echarts.color.lift(color)
        })
      }
    }

    var option = {
      baseOption: {
        title: {
          left: 'center',
          top: 20,
          textStyle: {
            color: 'white',
            fontSize: 20
          },
          subtextStyle: {
            color: 'white',
            fontSize: 16
          }
        },
        timeline: {
          show: false,
          autoPlay: true,
          // 热点变化时间
          data: ['7:00', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00'],
          axisType: 'category',
          // padding: [5, 5, 5, 5],
          playInterval: 400,
          lineStyle: { color: 'white' },
          label: {
            normal: {
              show: false,
              textStyle: {
                color: 'white',
                fontSize: 13
              }
            }
          }
        },
        bmap: {
          center: [108.96048, 34.252448],
          zoom: 14,
          roam: true,
          // 地图样式
          // mapStyle: {
          //   styleJson: [
          //     {
          //       'featureType': 'land',     //调整土地颜色
          //       'elementType': 'geometry',
          //       'stylers': {
          //         'color': 'rgba(14, 58, 73, .3)'
          //       }
          //     },
          //     {
          //       'featureType': 'building',   //调整建筑物颜色
          //       'elementType': 'geometry',
          //       'stylers': {
          //         'color': 'rgba(14, 58, 73, .3)'
          //       }
          //     },
          //     {
          //       'featureType': 'building',   //调整建筑物标签是否可视
          //       'elementType': 'labels',
          //       'stylers': {
          //         'visibility': 'off'
          //       }
          //     },
          //     {
          //       'featureType': 'highway',     //调整高速道路颜色
          //       'elementType': 'geometry',
          //       'stylers': {
          //         'weight': '0.5',
          //         'color': '#060709'
          //       }
          //     },
          //     {
          //       'featureType': 'highway',    //调整高速名字是否可视
          //       'elementType': 'labels',
          //       'stylers': {
          //         'weight': '0.5',
          //         'visibility': 'off'
          //       }
          //     },
          //     {
          //       'featureType': 'arterial',   //调整一些干道颜色
          //       'elementType': 'geometry',
          //       'stylers': {
          //         'weight': '0.5',
          //         'color': '#060709'
          //       }
          //     },
          //     {
          //       'featureType': 'poi', // 兴趣点样式
          //       'elementType': 'all',
          //       'stylers': {
          //         'visibility': 'off'
          //       }
          //     },
          //     {
          //       'featureType': 'arterial',
          //       'elementType': 'labels',
          //       'stylers': {
          //         'visibility': 'off'
          //       }
          //     },
          //     {
          //       'featureType': 'green',
          //       'elementType': 'geometry',
          //       'stylers': {
          //         'visibility': 'off'
          //       }
          //     },
          //     {
          //       'featureType': 'water',
          //       'elementType': 'geometry',
          //       'stylers': {
          //         'color': '#060709'
          //       }
          //     },
          //     {
          //       'featureType': 'subway',    //调整地铁颜色
          //       'elementType': 'geometry',
          //       'stylers': {
          //         'color': '#060709',
          //         'weight': .5
          //       }
          //     },
          //     {
          //       'featureType': 'subway',
          //       'elementType': 'labels',
          //       'stylers': {
          //         'visibility': 'off'
          //       }
          //     },
          //     {
          //       'featureType': 'railway',
          //       'elementType': 'geometry',
          //       'stylers': {
          //         'weight': 0.5,
          //         'visibility': 'off',
          //         'color': '#060709'
          //       }
          //     },
          //     {
          //       'featureType': 'railway',
          //       'elementType': 'labels',
          //       'stylers': {
          //         'visibility': 'off'
          //       }
          //     },
          //     {
          //       'featureType': 'all',     //调整所有的标签的边缘颜色
          //       'elementType': 'labels.text.stroke',
          //       'stylers': {
          //         'color': '#313131'
          //       }
          //     },
          //     {
          //       'featureType': 'all',     //调整所有标签的填充颜色
          //       'elementType': 'labels.text.fill',
          //       'stylers': {
          //         'color': '#FFFFFF'
          //       }
          //     },
          //     {
          //       'featureType': 'manmade',
          //       'elementType': 'geometry',
          //       'stylers': {
          //         'visibility': 'off'
          //       }
          //     },
          //     {
          //       'featureType': 'manmade',
          //       'elementType': 'labels',
          //       'stylers': {
          //         'visibility': 'off'
          //       }
          //     },
          //     {
          //       'featureType': 'local',
          //       'elementType': 'geometry',
          //       'stylers': {
          //         'visibility': 'off',
          //         'color': '#060709'
          //       }
          //     },
          //     {
          //       'featureType': 'local',
          //       'elementType': 'labels',
          //       'stylers': {
          //         'visibility': 'off'
          //       }
          //     },
          //     {
          //       'featureType': 'subway',
          //       'elementType': 'geometry',
          //       'stylers': {
          //         'lightness': -65
          //       }
          //     },
          //     {
          //       'featureType': 'railway',
          //       'elementType': 'all',
          //       'stylers': {
          //         'weight': '0.5',
          //         'lightness': -40
          //       }
          //     },
          //     {
          //       'featureType': 'boundary',
          //       'elementType': 'geometry',
          //       'stylers': {
          //         'color': '#8b8787',
          //         'weight': '1',
          //         'lightness': -29
          //       }
          //     }]
          // }
        },
        // 渐变度数
        visualMap: {
          type: 'continuous',
          // dimension: 2,
          top: 'bottom',
          left: 'right',
          min: 0,
          max: 70,
          seriesIndex: 0,
          precision: .01,
          itemHeight: '130px',
          itemWidth: '20px',
          borderWidth: '2px',
          borderColor: '#01b6eb',
          inRange: {
            color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
          },
          // hide handler bar
          calculable: false,
          hoverLink: false,
          text: ['密集', '稀疏'],
          // textGap: '4px',
          // textAlign: 'left',
          textStyle: {
            color: '#fff',
            fontSize: '12px'
          },
          align: 'left'
        },
        series: [
          {
            type: 'heatmap',
            mapType: 'china',
            coordinateSystem: 'bmap',
            blurSize: 40
          },
          // {
          //   name: 'Top 5',
          //   type: 'effectScatter',
          //   coordinateSystem: 'bmap',
          //   data: convertData(heatCoord.sort(function (a, b) {
          //     return b.value - a.value;
          //   }).slice(0, 6)),
          //   symbolSize: function (val) {
          //     return val[2] / 10;
          //   },
          //   showEffectOn: 'emphasis',
          //   rippleEffect: {
          //     brushType: 'stroke'
          //   },
          //   hoverAnimation: true,
          //   label: {
          //     normal: {
          //       formatter: '{b}',
          //       position: 'right',
          //       show: true
          //     }
          //   },
          //   itemStyle: {
          //     normal: {
          //       color: '#f4e925',
          //       shadowBlur: 10,
          //       shadowColor: '#333'
          //     }
          //   },
          //   zlevel: 1
          // },
          {
            type: 'custom',
            coordinateSystem: 'bmap',
            data: [0],
            renderItem: renderItem,
            itemStyle: {
              normal: {
                opacity: 0.6
              }
            },
            animation: true,
            silent: true,
            z: -10
          }]
      },
      options: [
        {
          series: [{
            data: convertData(heatCoord, 1)
          }]
        },
        {
          series: [{
            data: convertData(heatCoord, 3)
          }]
        },
        {
          series: [{
            data: convertData(heatCoord, 3)
          }]
        },
        {
          series: [{
            data: convertData(heatCoord, 4)
          }]
        },
        {
          series: [{
            data: convertData(heatCoord, 5)
          }]
        },
        {
          series: [{
            data: convertData(heatCoord, 6)
          }]
        },
        {
          series: [{
            data: convertData(heatCoord, 5)
          }]
        },
        {
          series: [{
            data: convertData(heatCoord, 4)
          }]
        },
        {
          series: [{
            data: convertData(heatCoord, 3)
          }]
        },
        {
          series: [{
            data: convertData(heatCoord, 3)
          }]
        },
        {
          series: [{
            data: convertData(heatCoord, 3)
          }]
        }
      ]
    }
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
  }

  tempRender() {
    return (
      <ReactEcharts
        className="span-50"
        option={this.mapOption()}
        notMerge={true}
        lazyUpdate={true}
        style={{ height: '457px' }} />
    )
  }

  render() {
    return (
      <div className="map-container" style={{ height: '457px' }} ref="mapContainer">
      </div>
    )
  }
}

HeatMap.defaultProps = {
  coords: require('../api.mock/beilin.coord.json'),
  heatCoord: require('../api.mock/heat.map.coord.json'),
  names: require('../api.mock/heat.map/name.json'),
  coord1: require('../api.mock/heat.map/coord.json'),
  heat: require('../api.mock/heat.map/heat.json')
}

export default HeatMap